<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">{{msg}}</div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data:{
          msg:"test 生命周期"
          // ....
        },

        //初始化渲染需要调用的钩子(只会调用一次)
        beforeCreate(){
            //只做完了事件和一些其他模块的初始化工作
            //数据转绑  数据响应式还没有开始
            console.log("beforeCreate",this.msg)
        },
        created(){
            //做完数据转绑  数据响应式
            console.log("created",this.msg)
            //是我们发送ajax请求最早的地方!!!!
        },
        beforeMount(){
            //挂载前的钩子  模板解析已经成功了只是还没有被挂载
            console.log("beforeMount",this.$el)
        },
        mounted(){
            //挂载成功之后的钩子
            //页面动态效果最早可以编写的位置
            console.log("mounted",this.$el)
        },

        //当数据有修改会触发的钩子(有机会被调用0到N次)
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },

        //当vue死亡时调用的钩子
        beforeDestroy(){
            console.log("beforeDestroy")
        },
        destroyed(){
            console.log("destroyed")
            //收尾工作
            clearInterval(timeid)
        },

    })



    var timeid = setInterval(()=>{
        console.log("setInterval")
        vm.msg += "857 857"
    },1000)

    setTimeout(()=>{
        vm.$destroy()
    },3000)
</script>
</html>